////
/// Content
/// Floated
////

@import 'utils/shared/functions';
@import 'utils/shared/layout';

$floated-block-name: unquote('Block');

.Floated {
  @media screen and (max-width: get-breakpoint(tablet) - 1px) {
    @include draggable-source-layout($floated-block-name, 1, 2, 3, 4, 5, 7, 8) {
      width: 50%;
    }

    @include draggable-source-layout($floated-block-name, 6) {
      width: 100%;
    }

    @include draggable-source-layout($floated-block-name, 3) {
      .BlockContent {
        height: rows(4, true);
      }
    }

    .draggable--original ~ .Block:nth-child(3) {
      .BlockContent {
        height: rows(2, true);
      }
    }
  }

  @media screen and (min-width: get-breakpoint(tablet)) {
    @include draggable-source-layout($floated-block-name, 1, 2, 3) {
      width: 33.333%;
    }

    @include draggable-source-layout($floated-block-name, 4, 5, 6, 7, 8) {
      width: 50%;
    }

    @include draggable-source-layout($floated-block-name, 1, 2, 3, 7, 8) {
      .BlockContent {
        height: rows(3);
      }
    }

    @include draggable-source-layout($floated-block-name, 4) {
      .BlockContent {
        height: rows(6);
      }
    }

    @include draggable-source-layout($floated-block-name, 5, 6) {
      .BlockContent {
        height: rows(3);
      }
    }
  }

  @media screen and (min-width: get-breakpoint(desktop)) {
    @include draggable-source-layout($floated-block-name, 1, 2, 3, 7, 8) {
      .BlockContent {
        height: rows(4);
      }
    }
  }

  @media screen and (min-width: get-breakpoint('1080p', wide)) {
    @include draggable-source-layout($floated-block-name, 4) {
      .BlockContent {
        height: rows(8);
      }
    }

    @include draggable-source-layout($floated-block-name, 5, 6) {
      .BlockContent {
        height: rows(4);
      }
    }

    @include draggable-source-layout($floated-block-name, 7, 8) {
      .BlockContent {
        height: rows(5);
      }
    }
  }
}
